<template>
	<div class="container">
		<!-- 面包屑导航栏 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小区管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 模糊搜索框 -->
		<el-row>
			<!-- form表单行内表单 -->
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="小区名称:">
					<el-input @keydown.enter="handleEnter" v-model="queryInfo.communityName"
						placeholder="请输入小区名称"></el-input>
				</el-form-item>
				<el-form-item label="创建时间:">
					<div class="block">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							@change="handleDateRangeChange"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getComm">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-button type="primary" @click="add">新建小区</el-button>

		<!-- Form 添加信息的嵌套的表单-->
		<!-- title；对话框的名称 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="communityData">
				<el-form-item label="小区名称" label-width="80px">
					<el-input placeholder="请输入小区名称" v-model="communityData.communityName" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="所属地区" label-width="80px">
					<el-cascader v-model="address" :options="citys"></el-cascader>
					<!-- <el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader> -->
				</el-form-item>

				<el-form-item label="" label-width="80px">
					<el-input placeholder="请输入小区详细地址" v-model="communityData.communityAddress"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="小区坐标" label-width="80px">
					<el-button @click="getGeo">获取位置</el-button>
					<span>{{communityData.communityLongitude}},{{communityData.communityLatitude}}</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirmForm">确 定</el-button>
			</div>
		</el-dialog>



		<!-- 表格内容 -->
		<el-table :data="list" border style="width: 100%;margin-top: 20px;"
			:header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip>
			<el-table-column prop="communityId" label="id" width="180" align="center">
			</el-table-column>
			<el-table-column prop="communityName" label="名称" width="180" align="center">
			</el-table-column>
			<el-table-column prop="communityAddress" label="位置" align="center">
			</el-table-column>
			<el-table-column prop="communityUserCount" label="用户数量" align="center">
			</el-table-column>
			<el-table-column prop="communityShopCount" label="关联门店" align="center">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-button type="text" @click="handleLook(scope.row.communityId)">查看关联门店</el-button>
					<el-button type="text" @click="handleEdit(scope.row)">编辑小区</el-button>
					<el-button type="text" @click="handleDelete(scope.row.communityId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 分页 -->
		<el-row>
			<div class="block">
				<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]"
					:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange">
		
				</el-pagination>
			</div>
		</el-row>
		
		
		
		
		<!-- Form 关联门店的嵌套的表单-->
		<!-- title；对话框的名称 -->
		<el-dialog :title="te" :visible.sync="dialogLook" width="50%" @close="can">
			<el-form :model="relevantDate">
				<el-form-item >
					<el-input style="width: 200px;" placeholder="请输入门店名称" v-model="queryInfo.shopName" autocomplete="off"></el-input>
					<el-button @click="Search" style="margin-left: 20px;">搜索</el-button>
					<el-button @click="addShop" v-show="isADD">添加关联门店</el-button>
				</el-form-item>
				
				
				<el-table :data="shopList" border style="width: 100%;margin-top: 20px;"
					:header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip
					@selection-change="handleSelectionChange">
					
					<el-table-column prop="shopCommunitySort" label="序号" width="180" align="center" v-if="this.opt == false">
					</el-table-column>
					<el-table-column type="selection" width="55" >
					</el-table-column>
					<el-table-column>
					</el-table-column>
					<el-table-column prop="shopName" label="名称" width="180" align="center">
					</el-table-column>
					<el-table-column prop="shopId" label="ID" align="center">
					</el-table-column>
					<el-table-column prop="shopCategoryList" label="排序" align="center">
					</el-table-column>
					<el-table-column prop="shopAddress" label="地址" align="center">
					</el-table-column>	
					<el-table-column prop="shopOrderCount" label="订单数量" align="center">
					</el-table-column>
					<el-table-column label="操作" v-if="this.opt == false">
						<template slot-scope='scope'>
							<el-button type="text" @click="shopDelete(scope.row.shopId)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				
				
				<!-- 分页 -->
				<el-row>
					<div class="block">
						<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]"
							:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.opt?addTotal:lookTotal"
							@size-change="handleSizeChangeTo" @current-change="handleCurrentChangeTo">
							
						</el-pagination>
					</div>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="can">取 消</el-button>
				<el-button @click="confirmADD" v-if="this.opt == true">保 存</el-button>
				<!-- <el-button type="primary" @click="confirmForm">确 定</el-button> -->
			</div>
			
			
		</el-dialog>
	</div>
</template>

<script>
	// 导入省市区数据
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					communityName: '',
					pageNum: 1, // 当前页码  
					pageSize: 10, // 每页显示条数  
					// 使用数组来保存日期范围，仅用于内部状态同步
					// 分别保存开始时间和结束时间  
					communityId:'',
					shopName:'',
					startTime: '',
					endTime: '',
				},
				total: 0, // 总数据条数  
				date: '',
				list: [], // 表格数据
				title: '新增小区',
				communityData: { // 小区信息
					addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
					communityAddress: "", // 小区详细地址
					communityAreaCode: "", // 小区位置编码
					communityCity: "", // 小区所属城市
					communityCoordinates: "", // 小区所属详细地址--
					communityDistrict: "", // 小区所属区域 
					communityId: "", // 小区编号
					communityLatitude: "", // 小区纬度
					communityLongitude: "", // 小区经度
					communityName: "", // 小区名称
					communityProvince: "", // 小区所属省份/直辖市
				},
				//	嵌套的表单
				dialogFormVisible: false,
				citys: citys,
				address: [], // 定义地址，用来接收省市区联动数据
				formLabelWidth: '120px',
				//	嵌套的关联门店表单
				URL:'',
				te:'查看关联门店',
				dialogLook:false,
				shopList:[],	//	查看关联门店的表格数据
				opt:false,	//	序号是否有，操作是否有
				isADD:true,
				lookTotal:0,
				addTotal:0,
				multipleSelection: [],//	选中的要添加的关联门店集合
				relevantDate:{
					
				}
			}
		},

		methods: {
			//	获取表格数据
			getComm(pageNum = 1 ,pageSize = 10) {
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/community?action=selectAll', {
						params: this.queryInfo
					})
					.then((res) => {
						if(res.status == 200){
							console.log(res);
						this.total = res.data.data.total
						this.list = res.data.data.list
						}else{
							alert("出错了！")
						}
						// console.log(res.data.data.list);
					})
			},
			// 处理每页条数变化
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.getComm(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化  
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.getComm(val, this.queryInfo.pageSize);
			},
			//2222222222222222222222
			handleSizeChangeTo(val){
				if(this.opt)this.handleSizeChange111(val)
				else this.handleSizeChange000(val)
			},
			handleCurrentChangeTo(val){
				if(this.opt)this.handleCurrentChange111(val)
				else this.handleCurrentChange000(val)
			},
			// 关联门店页面分页
			// 处理每页条数变化	--	查看关联门店
			handleSizeChange000(val) {
				this.queryInfo.pageSize = val;
				this.handleLook2(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化
			handleCurrentChange000(val) {
				this.queryInfo.pageNum = val;
				this.handleLook2(val, this.queryInfo.pageSize);
			},
			// 处理每页条数变化	--	添加关联门店
			handleSizeChange111(val) {
				this.queryInfo.pageSize = val;
				this.changePage(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化
			handleCurrentChange111(val) {
				this.queryInfo.pageNum = val;
				this.changePage(val, this.queryInfo.pageSize);
			},
			//	切换添加关联门店页面表格的页码
			changePage(pageNum,pageSize){
				
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/shop?action=selectShopAll',{
					params:this.queryInfo
				})
				.then((res=>{
					if(res.data.status == 200){
						// alert("xxxx")
						this.addTotal = res.data.data.total
						this.shopList = res.data.data.list
					}
				}))
			},
			//	查看关联门店切换页面
			handleLook2(pageNum,pageSize){
				// alert('xixix')
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/community?action=selectShop',{
					params:this.queryInfo
				})
				.then((res=>{
					if(res.data.status == 200){
						// alert("xxxx")
						this.lookTotal = res.data.data.total
						this.shopList = res.data.data.list
					}
				}))
			},
			//	查看关联门店
			handleLook(communityId){
				this.dialogLook = true
				this.queryInfo.pageNum = 1
				this.queryInfo.pageSize = 10
				this.queryInfo.communityId = communityId
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/community?action=selectShop',{
					params:this.queryInfo
				})
				.then((res=>{
					if(res.data.status == 200){
						// alert("xxxx")
						this.lookTotal = res.data.data.total
						this.shopList = res.data.data.list
					}
				}))
			},
			//	搜索门店
			Search(){
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/shop?action=selectAll'
				if(this.opt == true){
					this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/shop?action=selectAll'
				}
				this.$http.get(this.URL,{
					params:this.queryInfo
				})
				.then((res=>{
					if(res.data.status == 200){
						this.lookTotal = res.data.data.total
						this.shopList = res.data.data.list
					}
				}))
			},
			//	点击添加关联门店
			addShop(){
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/shop?action=selectShopAll'
				this.opt = !this.opt
				this.dialogLook = false 
				this.dialogLook = true
				this.isADD = false
				this.$http.get(this.URL,{
					params:this.queryInfo
				})
				.then((res=>{
					if(res.data.status == 200){
						// alert("yes")
						this.shopList = res.data.data.list
						this.addTotal = res.data.data.total
					}
				}))
			},
			//	勾选多行
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
			//	确定添加关联门店
			confirmADD(){
				// associatedStores/addAssociatedStores
				let shuzu = []
				let i = 0
				for(let item of this.multipleSelection){
					shuzu[i] = item.shopId
					i++
				}
				let Url = 'http://10.10.18.156:8089/panghudaojiaBackend/community?action=addShop&panghuCommunityId='+this.queryInfo.communityId+'&fendeShopCommunityList='+shuzu
				
				// alert('xxxxx')
				// this.$http({
				// 	methods:"post",
				// 	url:'http://10.10.18.156:8089/panghudaojiaBackend/community?action=addShop',
				// 	params:{
				// 	panghuCommunityId:this.queryInfo.communityId,
				// 	'fendeShopCommunityList':shuzu
				// 	}
				// })
				this.$http({
					methods:"post",
					url:Url
				// 	params:{
				// 		action:'addShop',
				// 		panghuCommunityId:this.queryInfo.communityId,
				// 		'fendeShopCommunityList':shuzu
				// },
				})
				.then((res=>{
					if(res.data.status == 200){
						this.$message.success('添加成功！')
						this.can()
					}
				}))							
			},										
			//	点击弹窗右上角的 x
			can(){
				this.opt = false																																					
				this.dialogLook = false
				this.isADD = true
				this.lookTotal = 0
				this.addTotal = 0
				this.getComm()
			},
			//	修改
			handleEdit(row) {
				console.log('当前行数据：', row);
				// 在这里你可以使用 row 来获取或修改数据
				this.title = '编辑小区' //把title改为编辑小区
				this.communityData = row
				this.dialogFormVisible = true //显示弹出框
				this.communityData.addOrUpdateFlag = 2 //把状态码改为2	【1--添加  2--修改】
				this.address = [this.communityData.communityProvince, this.communityData.communityCity, this.communityData.communityDistrict
				]; // 组成省市区数据
			},
			//	删除
			handleDelete(communityId) {
				console.log(communityId);
				this.$confirm('真的要删除这条信息吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						methods:'post',
						url:'http://10.10.18.156:8089/panghudaojiaBackend/community?action=delete', 
						params:{
							'communityId': communityId
						},
						})
						.then((res) => {
							if (res.data.status == 200) {
								this.$message.success('删除成功')
								this.getComm()
							} else {
								this.$message.error('删除失败')
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//	删除关联门店
			shopDelete(shopId){
				console.log(shopId);
				this.$confirm('真的要删除这条信息吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						methods:'post',
						url:'http://10.10.18.156:8089/panghudaojiaBackend/community?action=deleteShop', 
						params:{
							communityId:this.queryInfo.communityId,
							'shopId': shopId
						},
						})
						.then((res) => {
							if (res.data.status == 200) {
								this.$message.success('删除成功')
								this.handleLook(this.queryInfo.communityId)
							} else {
								this.$message.error('删除失败')
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//	新建打开表单
			add() {
				this.dialogFormVisible = true
				this.title = ''
			},
			//	获取经纬度
			getGeo() {
				let address = this.communityData.communityProvince + this.communityData.communityCity + this.communityData
					.communityDistrict
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							'address': address
						}
					})
					.then(res => {
						console.log(res.data.geocodes[0].location);
						let loc = res.data.geocodes[0].location
						this.communityData.communityLongitude = loc.split(',')[0]
						this.communityData.communityLatitude = loc.split(',')[1]
					})
			},
			// 添加或修改小区
			confirmForm() {
				this.$http({
					methods:'post',
					url:'http://10.10.18.156:8089/panghudaojiaBackend/community?action=update',
					params:{
						addOrUpdateFlag:this.communityData.addOrUpdateFlag,
						communityId:this.communityData.communityId,
						communityName:this.communityData.communityName,
						communityProvince:this.communityData.communityProvince,
						communityCity:this.communityData.communityCity,
						communityDistrict:this.communityData.communityDistrict,
						communityAddress:this.communityData.communityAddress,
						communityLatitude:this.communityData.communityLatitude,
						communityLongitude:this.communityData.communityLongitude,
						communityAreaCode:this.communityData.communityAreaCode,
						communityCoordinates:this.communityData.communityCoordinates
						},
					})
					.then((res) => {
						// console.log('Form data:', res.data);
						if (res.data.status == 200) {
							this.$message.success('操作成功')
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新加载数据
							this.getComm()
							this.cancel()
						}
					})
			},
			// 取消
			cancel() {
				this.dialogFormVisible = false
				this.communityData = { // 小区信息
					addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
					communityAddress: "", // 小区详细地址
					communityAreaCode: "", // 小区位置编码
					communityCity: "", // 小区所属城市
					communityCoordinates: "", // 小区所属详细地址--
					communityDistrict: "", // 小区所属区域 
					communityId: "", // 小区编号
					communityLatitude: "", // 小区纬度
					communityLongitude: "", // 小区经度
					communityName: "", // 小区名称
					communityProvince: "", // 小区所属省份/直辖市
				}
				this.address = []
			}
		},




		// 组件加载时获取初始数据
		mounted() {
			this.getComm()
		},
		// 	侦听器侦听日期的变化
		watch: {
			//	要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			// 定义侦听器，把动态获取的省市区加入到小区对象中
			address() {
				//console.log(this.address);
				this.communityData.communityProvince = this.address[0];
				this.communityData.communityCity = this.address[1];
				this.communityData.communityDistrict = this.address[2];
			}
		},
	}
</script>

<style>
	.el-table-column {
		height: 80px;
	}
</style>